<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据代理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 
			关于Vue中的数据代理：
					1.什么是数据代理？
							(1).配置对象data中的数据，会被收集到vm._data中，
									然后通过，Object.defineProperty让vm上拥有data中所有的属性。
							(2).当访问vm的msg时，返回的是_data当中msg的值。
							(3).当修改vm的msg时，修改的是_data当中msg的值。
					2.为什么要数据代理？
							为了更加方便的读取和修改_data中的数据，不做数据代理，就要：_data.xxx访问数据。
					3.扩展思考？—— 为什么要先收集在_data中，然后再代理出去呢？
							更高效的监视数据（直接收集到vm上会导致监视效率太低，不便于区分哪些是内置的属性，哪些是程序员设置的属性）。
					4.插值语法：{{xxx}}中的xxx可以读取到vm身上所有的属性
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{school}}</h2>
			<h2>学校地址：{{address}}</h2>
			<h2>测试读取vm身上的$children：{{$children}}</h2>
			<h2>测试读取vm身上的_c：{{_c}}</h2>
		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:'#root',
				data:{
					school:'尚硅谷',
					address:'宏福科技园'
				}
			})
			console.log(vm)
		</script>
	</body>
</html>